<template>
  <div>
    <div class="a">
      <div style="width: 80%;margin: 0px auto;background-color: white;height: 100%">
        <div style="padding-top: 20px;padding-left: 20px">
          <el-input style="width: 200px" v-model="search"/>
          <el-button @click="searchClick">搜索</el-button>
        </div>
        <br>
        <input style="margin-left: 20px" type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()"/>
        <el-popconfirm
            title="确定删除吗？"
            @confirm="deleteBatch"
        >
          <template #reference>
            <el-button type="text">批量删除</el-button>
          </template>
        </el-popconfirm>
        <div style="min-height: 100px">

          <div v-for="i in rest" style="border-bottom: 1px solid gray;padding: 20px 0px">
            <div style="float: left;vertical-align: middle;">
                        <span style="line-height: 50px">
<input type="checkbox" :value="i.commentId" v-model="checkedname"/>
                        <img v-if="i.user.userImgsrc" :src="i.user.userImgsrc"
                             style="width: 30px;height: 30px;margin-left: 20px;vertical-align: middle"
                             alt="" @click="flagClick(i.commentId)">
                        </span>
            </div>

            <div style="float: right">
              <img :src="i.video.videoCover" style="width: 100px;height: 100px" alt=""  @click="jumpPath(i.video.videoId)">
            </div>

            <div style="margin-left: 20px">
                                    <span style="margin-left: 5px"><span v-if="i.user">{{ i.user.userNickname }}</span> <span>
                                      <span v-if="i.commentParentid">回复@ <span
                                          v-if="i.pidComment.user">{{ i.pidComment.user.userNickname }}</span> 的评论 <el-button
                                          type="text"
                                          @click="flagClick(i.commentId)">查看评论</el-button></span></span></span>
              <br>
              <div v-if="flag&&cid==i.commentId"
                   style="width: 70%;height: 100px;border: 1px solid gray;margin-left: 80px">
                <div style="float: left;display: inline-block;width: 40px">
                  <img v-if="i.pidComment.user.userImgsrc" :src="i.pidComment.user.userImgsrc"
                       style="width: 30px;height: 30px;vertical-align: middle;"
                       alt="">
                </div>
                <div style="margin-left: 20px;display: inline-block;">
                  <span>{{ i.pidComment.user.userNickname }}</span><br>
                  <div style="height: 10px"></div>
                  <span>{{ i.pidComment.commentContent }}</span><br>
                  <div style="height: 10px"></div>
                  <span>{{ i.pidComment.commentCreatetime|formatDate }}</span>
                </div>

              </div>
              <div style="margin-top: 10px;margin-left: 50px">
                <span style="margin: 10px 0px">{{ i.commentContent }}</span><br>
                <span>{{ i.commentCreatetime|formatDate }}
                                    <el-button type="text" @click="replyClick(i)"><b>回复</b></el-button>
                                  <el-button type="text" @click="del(i.commentId)">删除</el-button>
            </span>
              </div>

            </div>
          </div>
        </div>


        <div style="height: 80px;">
          <el-pagination
              style="margin: 30px 0px"
              v-model:currentPage="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="obj.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="obj.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"></el-pagination>
        </div>

      </div>
    </div>
    <el-dialog @close="handleClose" :visible.sync="flag2" width="60%">

      <el-form ref="form" size="222px" label-width="80px" :rules="rules">
        <el-form-item label="标题" >
          <el-input style="width: 600px" v-model="videoTitle"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">投稿</el-button>
          <el-button @click="exit">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CommentAdmin",
  data() {

    return {
      cid: '',
      flag: false,
      ative: '',
      currentPage: 1,
      obj: {},
      size: 5,
      search: '',
      rest: {},
      ids: [],
      checked: false,
      checkedname: [],
      checkedArr: [],
      flag2: false,
      form: {},
      videoTitle: ''
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      let user = sessionStorage.getItem("user")
      var users = JSON.parse(user)
      this.$http.get("hemo/system/comment/manageReviews?videoTitle=" + this.search + "&userId=" + users.userId + "&pageSize=" + this.size + "&pageNum=" + this.currentPage).then(r => {
        this.obj = r.data
        this.rest = r.data.list
        console.log(r.data.list)
        for (let i = 0; i < r.data.list.length; i++) {
          console.log(r.data.list[i].commentId);
          this.checkedArr.push(r.data.list[i].commentId)
        }

      })
    },
    changeAllChecked: function () {
      if (this.checked) {
        this.checkedname = this.checkedArr
      } else {
        this.checkedname = []
      }
    },
    flagClick(id) {
      this.flag = !this.flag
      this.cid = id
      console.log(this.cid)
    },
    handleSizeChange(pageSize) {
      this.size = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    searchClick() {
      this.load()
    },
    deleteBatch() {
      if (this.checkedname) {
        this.$http.get("hemo/system/comment/ds?ids=" + this.checkedname).then(r => {
          this.$message.success('删除成功');
          this.load();
        });
      } else {
        this.$message.error('请选择至少一条消息');
      }
    },
    del(id) {
      this.$http.get("hemo/system/comment/d?id=" + id).then(r => {
        this.$message.success('删除成功')
        this.load()
      })
    },
    replyClick(i) {
      this.flag2 = true;
      this.form = i
    },
    handleClose(){
      this.flag2=false
      this.videoTitle=''
    },
    onSubmit(){
      if(this.videoTitle.length<0){
        this.$message.error('内容不能为空')
      }else  if(this.videoTitle.length<3){
        this.$message.error('内容过少')
      }else {
        this.$http.get("hemo/system/comment/add?commentContent="+this.videoTitle+"&commentVideoId="+this.form.video.videoId+"&commentUserId="
        +this.form.user.userId+"&commentParentid="+this.form.commentId).then(r=>{
          this.flag2=false
          this.videoTitle=''
          this.load()
        })
      }
    },
    exit(){
      this.flag2=false
      this.videoTitle=''
    },

    // 点击跳转路径
    jumpPath(keyword) {
      // this.$router.push(`/search?keyword=${keyword}`);
      this.$router.push(`/Vedios?id=${keyword}`);
    },
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    }
  }
}
</script>

<style scoped>
.a {
  height: 130%;
}
</style>
